<template>
  <section class="my-section">
    <div class="container pt-3">
      <div class="card" style="border-radius: 25px;">
        
        <div class="row justify-content-center">
          <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
            
            <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">注 册</p>
            
            <form class="mx-1 mx-md-4">
              
              <!--输入用户名-->
              <div class="d-flex flex-row align-items-center mb-4">
                <i class="fas fa-user fa-lg me-3 fa-fw"></i>
                <div class="form-outline flex-fill mb-0">
                  <input type="text"
                         id="name"
                         class="form-control"
                         @keyup.enter="register"
                         placeholder="请输入您的用户名"
                         v-model.trim="userRegisterInfo.username"/>
                  <label class="form-label" for="name">Your Name</label>
                </div>
              </div>
              
              <!--输入邮箱-->
              <div class="d-flex flex-row align-items-center mb-4">
                <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
                <div class="form-outline flex-fill mb-0">
                  <input type="email"
                         id="email"
                         class="form-control"
                         @keyup.enter="register"
                         placeholder="请输入您的邮箱账号"
                         v-model.trim="userRegisterInfo.email"/>
                  <label class="form-label" for="email">Your Email</label>
                </div>
              </div>
              
              <!--输入密码-->
              <div class="d-flex flex-row align-items-center mb-4">
                <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
                <div class="form-outline flex-fill mb-0">
                  <input type="password"
                         id="password"
                         class="form-control"
                         @keyup.enter="register"
                         placeholder="请输入您的密码"
                         v-model.trim="userRegisterInfo.password"/>
                  <label class="form-label" for="password">Password</label>
                </div>
              </div>
              
              <!--再次输入密码-->
              <div class="d-flex flex-row align-items-center mb-4">
                <i class="fas fa-key fa-lg me-3 fa-fw"></i>
                <div class="form-outline flex-fill mb-0">
                  <input type="password"
                         id="confirm"
                         class="form-control"
                         @keyup.enter="register"
                         placeholder="请输入确认您的密码"
                         v-model.trim="userRegisterInfo.repeatPassword"/>
                  <label class="form-label" for="confirm">Repeat your password</label>
                </div>
              </div>
              
              <div class="form-check d-flex justify-content-center mb-5">
                <input class="form-check-input me-2"
                       id="form-check-label"
                       type="checkbox" v-model="agreeToTheTerms" @click="agree"
                />
                <label class="form-check-label" for="form-check-label" id="form-check-label"
                       @click="agree;">
                  阅读并接受
                  <a href="https://privacy.baidu.com/policy/children-privacy-policy/index.html?_1678523966343"
                     target="_blank">
                    个人信息保护声明
                  </a>
                </label>
              
              </div>
              
              <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
                <button type="button"
                        id="buttonForRegister"
                        class="btn btn-primary btn-lg"
                        :disabled="disabled"
                        @click="register"
                        @keyup.enter="register">&nbsp;注 册&nbsp;
                </button>
              </div>
            
            </form>
          
          </div>
          <!--图片展示区域-->
          <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
            <img src="./images/暂无记录.svg"
                 class="img-fluid" alt="Sample image">
            <el-carousel indicator-position="outside">
              <el-carousel-item v-for="item in 4" :key="item">
                <h3>{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      
      </div>
    </div>
    <br>
    <br>
    <br>
    <hr>
    <h2>介绍网站的内容</h2>
  </section>
</template>

<script>

import {isRegisterCode, register, registerSendCode} from "@/api/user/user";

export default {
  name: "Register",
  data() {
    return {
      userRegisterInfo: {
        username: '',
        email: '',
        password: '',
        repeatPassword: '',
      },
      code: '',
      agreeToTheTerms: false,
      disabled: true
    }
  },
  methods: {
    agree() {
      this.agreeToTheTerms = !this.agreeToTheTerms
      this.disabled = !this.disabled
    },
    register() {
      if (this.userRegisterInfo.username === '') {
        this.$notify({
          title: '警告',
          message: '用户昵称不能为空,请输入用户昵称',
          type: 'warning'
        });
        return
      }
      if (this.userRegisterInfo.email === '') {
        this.$notify({
          title: '警告',
          message: '邮箱号不能为空,请输入邮箱号',
          type: 'warning'
        });
        return
      }
      if (!/^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/.test(this.userRegisterInfo.email)) {
        this.$notify.error({
          title: '错误',
          message: '你输入的邮箱号不合法,请重写输入'
        });
        return
      }
      if (this.userRegisterInfo.password === '') {
        this.$notify({
          title: '警告',
          message: '密码不能为空,请输入密码',
          type: 'warning'
        });
        return
      }
      if (this.userRegisterInfo.password !== this.userRegisterInfo.repeatPassword) {
        this.$notify.error({
          title: '错误',
          message: '两次密码输入不一致',
        });
      } else {
        // 发送验证码
        registerSendCode(this.userRegisterInfo.email).then(res => {
          if (res.data.code === 200) {
            this.$message.success("验证码发送成功");
          } else {
            this.$message.success("验证码发送失败")
          }
        })
        
        // 验证码校验
        this.$prompt(`已往${this.userRegisterInfo.email}发送6位验证码`, '请输入验证码', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\d{6}$/,
          inputErrorMessage: '验证码格式不正确',
          // 取消所以关闭按钮
          closeOnClickModal: false,
          showCancelButton: false,
          showClose: false
        }).then(({value}) => {
          console.log('用户输入的验证码为' + value)
          isRegisterCode(this.userRegisterInfo.email, value).then((res) => {
            if (res.data.code === 200) {
              register(this.userRegisterInfo).then((res) => {
                if (res.data.code === 200) {
                  console.log('注册成功', res.data.code, res.data.message)
                  this.$message.success(res.data.message)
                  this.$router.replace('/login');
                } else {
                  this.$message.error(res.data.message)
                }
              });
            } else {
              this.$message.error("验证码错误")
            }
          })
        })
      }
    },
    
  }
}
</script>

<style scoped lang="css">

.my-section {
  background-color: #eeeeee;
  zoom: 90%;
  font-size: 19px
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}


</style>
